import { onMounted, reactive, Ref, ref, watch } from "@vue/composition-api";
import { parseTime } from "@/utils/";
import {
  getSysLogList,
  LogItem,
  OperationType,
  recordOperateLogFunc
} from "@/api/log";

const recordOperateLog = recordOperateLogFunc("系统管理", "操作日志");

export function useLogList() {
  const logList: Ref<LogItem[]> = ref([]);
  const logTotal = ref(0);

  const page = ref(1);
  const size = ref(15);
  const keyword = ref("");

  const startToEndTimer: Ref<Date[]> = ref([]);

  let keywordTimer = setTimeout(() => {}, 555);

  // 重要性, 为了方便拼接和传值,这里就用string不用number了
  const importance = ref("");

  const hasLogListLoading = ref(true);

  onMounted(refreshLogList);

  watch([page, size, importance, startToEndTimer], refreshLogList);

  watch(keyword, () => {
    hasLogListLoading.value = true;
    clearTimeout(keywordTimer);
    keywordTimer = setTimeout(refreshLogList, 555);
  });

  /**
   * 根据所有状态刷新日志显示列表
   */
  async function refreshLogList() {
    hasLogListLoading.value = true;

    let startTime = "";
    let endTime = "";

    if (startToEndTimer.value && startToEndTimer.value.length !== 0) {
      const [startDate, endDate] = startToEndTimer.value;
      startTime = parseTime(startDate);
      endTime = parseTime(endDate);
    }

    const { count, results } = await getSysLogList(
      page.value,
      size.value,
      keyword.value,
      importance.value,
      startTime,
      endTime
    );
    logList.value = results;
    logTotal.value = count;
    hasLogListLoading.value = false;
    recordOperateLog(OperationType.Select);
  }

  return {
    logList,
    logTotal,
    size,
    page,
    keyword,
    importance,
    startToEndTimer,
    hasLogListLoading
  };
}

export function useDetailWindow() {
  const detail = reactive({
    show: false,
    target: {
      batch_eqs: "",
      deptid: {},
      dt_ins: "",
      empid: {
        cnname: "",
        last_login: ""
      },
      id: 0,
      importance: 0,
      menu1: "",
      menu2: "",
      menu3: "",
      method_button: "",
      remark: "",
      shortcpname: {},
      userip: ""
    }
  });

  function openDetail(row: LogItem) {
    detail.target = row;
    detail.show = true;
    recordOperateLog(OperationType.Detail);
  }

  return {
    detail,
    openDetail
  };
}

/**
 * 日期选择器的快捷选项
 */
export const pickerOptions = {
  shortcuts: [
    {
      text: "最近一周",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "最近两周",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
        picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "最近一个月",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "最近两个月",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
        picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "最近三个月",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "最近一年",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
        picker.$emit("pick", [start, end]);
      }
    },
  ]
};
